* {
  margin: 0;
  padding: 0;
}
body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #222;
}
@keyframes rotateY {
  from {
    transform: rotateX(-25deg) rotateY(0);
  }
  to {
    transform: rotateX(-25deg) rotateY(360deg);
  }
}
@keyframes rotate {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotate(0deg);
  }
  100% {
    transform: rotateX(2turn) rotateY(1turn) rotate(1turn);
  }
}
.cube {
  --length: min(200px, 40vw, 40vh);
  --translate: calc(var(--length) / 2);
  --border: calc(var(--length) / 25);
  --bg-color: #ffffff;
  width: var(--length);
  height: var(--length);
  position: relative;
  box-sizing: border-box;
  transform-style: preserve-3d;
  animation: rotateY 6s linear infinite;
}
.cube .face {
  width: var(--length);
  height: var(--length);
  background: var(--bg-color);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: absolute;
  box-sizing: border-box;
  transform-style: preserve-3d;
  transition: all 0.3s;
}
.cube .face.front {
  transform: rotateY(0deg) translateZ(var(--translate));
}
.cube .face.back {
  transform: rotateY(180deg) translateZ(var(--translate));
}
.cube .face.left {
  transform: rotateY(-90deg) translateZ(var(--translate));
}
.cube .face.right {
  transform: rotateY(90deg) translateZ(var(--translate));
}
.cube .face.top {
  transform: rotateX(90deg) translateZ(var(--translate));
}
.cube .face.bottom {
  transform: rotateX(-90deg) translateZ(var(--translate));
}
.cube .face.bottom::after {
  content: '';
  position: absolute;
  background: rgba(0, 0, 0, 0.4);
  inset: 0;
  transform: translateZ(var(--translate));
  filter: blur(40px);
}
